<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-20 17:17:34
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-13 11:15:39
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\bulletinBoard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bulletinBoard">
    <div
      class="itemList"
      v-for="item in propsData.list"
      :key="item.id"
      :style="{ borderColor: item.color || 'orange' }"
      v-show="
        propsData.viewList.includes(item.type) || !propsData.viewList.length
      "
    >
      <p class="typeTitle">
        <span>{{ item.type }}({{ item.tasks.length }})</span>
        <el-dropdown
          @command="(val) => propsData.handleOperateList(val, item)"
          trigger="click"
          v-if="propsData.grounpModeValue === '10'"
        >
          <i class="el-icon-more" style="cursor: pointer"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">编辑清单</el-dropdown-item>
            <el-dropdown-item command="2">删除清单</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </p>
      <div
        class="itemSmall"
        v-for="val in item.tasks"
        :key="val.id"
        @click="handleTaskDetail(val, 'card')"
      >
        <span :class="['collect', val.followFlag ? 'isCollect' : null]"
          ><i class="el-icon-star-off" @click.stop="handleCollect(val)"></i>
        </span>
        <p class="itemSmall_title">{{ val.title }}</p>
        <p class="itemSmall_number">编号{{ val.code }}</p>
        <div class="cardLabel" v-if="val.tags">
          <el-tag
            :style="{ background: x.color }"
            v-for="x in val.tags"
            :key="x.id"
            >{{ x.tag }}</el-tag
          >
        </div>
        <div class="cardFzr"><span>负责人</span>{{ val.headUserName }}</div>
        <div
          class="aboveTask"
          v-if="val.superiorTaskTitle"
          @click.stop="handleTaskDetail(val, 'parent')"
        >
          上级任务：{{ val.superiorTaskTitle }}
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 6px;
          "
        >
          <div>
            <i
              class="el-icon-edit"
              style="margin-left: 8px; color: #409eff"
              @click.stop="handleTaskEdit(val)"
              v-if="
                [val.createBy, val.headUserId].includes(
                  $store.state.user.loginInfo.userId
                ) && val.status === '0'
              "
            ></i>
            <i
              class="el-icon-delete-solid"
              style="margin-left: 8px; color: #f56c6c"
              @click.stop="handleTaskDelete(val)"
              v-if="
                [val.createBy, val.headUserId].includes(
                  $store.state.user.loginInfo.userId
                ) && val.status === '0'
              "
            ></i>
          </div>
          <div
            class="planTime"
            :style="{ color: getDateDiff(val.endTime, true, val.status) }"
          >
            {{ getDateDiff(val.endTime, undefined, val.status) }}
          </div>
        </div>
      </div>
      <div v-if="propsData.grounpModeValue === '10'" class="pro_list_footer">
        <el-button
          style="width: 80%"
          @click="propsData.handleTask('standard', item)"
          ><i class="el-icon-plus" style="color: #1890ff; font-size: 18px"></i
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import {collectApi} from "@/api/task/task.js";
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    async handleCollect(val) {
      const res = await collectApi(val.followFlag ? "2" : "1", val.id);
      if (res.code === 200) {
        this.$message.success(val.followFlag ? "取消收藏成功" : "收藏成功");
        this.propsData.getList();
      }
    },
    async handleTaskDetail(val, type) {
      this.propsData.openTaskDrawer(
        val.type,
        type === "card" ? val.id : val.superiorTaskId
      );
    },
    async handleTaskEdit(val) {
      this.propsData.handleTaskEdit(val.type, val.id);
    },
    handleTaskDelete(val) {
      this.propsData.handleTaskDelete(val.id);
    },
    getDateDiff(date, isColor, status) {
      if (status === "0") {
        let startTime = moment().format("YYYY-MM-DD 00:00:00");
        let endTime = moment(date);
        let diff = endTime.diff(startTime, "milliseconds");
        let days = diff / (1000 * 60 * 60 * 24);
        if (days < 0) {
          return isColor ? "#F56C6C" : `逾期 ${Math.ceil(Math.abs(days))} 天`;
        }
        if (days < 1) {
          return isColor ? "#E6A23C" : `今天`;
        }
        if (days >= 1 && days < 2) {
          return isColor ? "#E6A23C" : `明天`;
        }
        if (days >= 2 && days < 3) {
          return isColor ? "#E6A23C" : `后天`;
        }
        return isColor ? "#E6A23C" : moment(date).format("YYYY-MM-DD HH:mm");
      } else {
        const statusMap = {
          10: { title: "完成待审批", color: "#E6A23C" },
          20: { title: "审批中", color: "#E6A23C" },
          30: { title: "审批不通过", color: "#F56C6C" },
          40: { title: "已完成", color: "#E6A23C" },
        };
        return isColor ? statusMap[status].color : statusMap[status].title;
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.bulletinBoard {
  padding: 12px;
  overflow-x: auto;
  width: 100%;
  display: flex;
  .pro_list_footer {
    text-align: center;
    padding: 10px 0;
    ::v-deep .el-button--medium {
      border: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 0 6px rgba(0, 0, 0, 0.04);
      &:hover {
        background: #fff;
      }
      &:focus {
        background: #fff;
      }
    }
  }
  .itemList {
    flex: none;
    width: 20%;
    margin-right: 12px;
    background: #f5f5f5;
    max-height: 72vh;
    border-radius: 8px;
    border-top: 7px solid red;
    overflow-y: scroll;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    padding-bottom: 12px;
    .typeTitle {
      font-size: 14px;
      color: #333;
      padding: 12px 20px;
      margin: 0;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
    }
    .itemSmall {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
      cursor: pointer;
      padding: 12px;
      margin: 10px;
      transition: 150ms ease all;
      position: relative;
      .collect {
        justify-content: flex-end;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        background: #e9e9e9;
        position: absolute;
        right: 0;
        top: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        display: none;
        .el-icon-star-off {
          margin-top: 5px;
          margin-right: 5px;
          font-size: 20px;
          color: rgb(248, 166, 42);
        }
        .collect:hover {
          background: rgb(248, 166, 42);
        }
      }
      .itemSmall_title {
        margin: 0;
        font-size: 14px;
        color: #666;
        overflow: hidden;
        height: 19px;
        width: 90%;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .itemSmall_number {
        font-size: 14px;
        color: #999;
        margin: 0;
        margin-top: 10px;
      }
      .cardLabel {
        display: flex;
        flex-wrap: wrap;
        margin-top: 8px;
        .el-tag {
          color: #fff;
          border: none;
          margin-right: 5px;
          margin-bottom: 5px;
          padding: 0 6px;
        }
        .el-tag--medium {
          line-height: 24px;
          height: 24px;
        }
      }
      .cardFzr {
        font-size: 14px;
        color: #666;
        display: flex;
        align-items: center;
        margin-top: 8px;
        span {
          margin-right: 6px;
          color: #fff;
          background: #81aada;
          padding: 3px;
          font-size: 12px;
          border-radius: 5px;
        }
      }
      .aboveTask {
        font-size: 14px;
        color: #999;
        margin-top: 8px;
      }
      .aboveTask:hover {
        color: #1890ff;
      }
      .planTime {
        text-align: right;
        font-size: 13px;
        margin-top: 8px;
      }
    }
    .itemSmall:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      transform: translateY(-5px);
    }
    .itemSmall:hover .collect {
      display: flex;
      justify-content: flex-end;
      background: rgb(189, 188, 186);
    }
    .itemSmall:hover .collect .el-icon-star-off {
      // color:  rgb(248, 166, 42);
      color: #fff;
    }

    .isCollect {
      display: block !important;
      background: rgb(248, 166, 42) !important;
      .el-icon-star-off {
        position: absolute !important;
        color: #fff !important;
        top: 0;
        left: 25px;
      }
    }
  }
}
</style>